<template>
	<view class="tab-bar">
		<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
			@click="handleTabClick(index)">
			{{ tab }}
			<view class="indicator gradient-accent" v-if="activeTab === index"></view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { defineProps, defineEmits } from 'vue'

	// Props定义
	interface Props {
		tabs : string[]
		activeTab : number
	}

	const props = withDefaults(defineProps<Props>(), {
		tabs: () => ['笔记', '收藏', '赞过'],
		activeTab: 0
	})

	// 事件定义
	const emit = defineEmits<{
		tabChange : [index: number]
	}>()

	// 方法
	const handleTabClick = (index : number) : void => {
		emit('tabChange', index)
	}
</script>

<style lang="scss" scoped>
	.gradient {
		&-accent {
			background: linear-gradient(90deg, #1C2D41, #546366);
		}
	}

	.tab-bar {
		display: flex;
		padding: 0 32rpx;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 24rpx 0;
			font-size: 26rpx;
			color: #666;
			position: relative;
			cursor: pointer;

			&.active {
				font-weight: 500;
				color: #333;
			}

			.indicator {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 52rpx;
				height: 6rpx;
				border-radius: 18rpx;
			}
		}
	}
</style>